<template>
  <div class="deptTree">
    <a-tree
      multiple
      :size="'small'"
      :checkable="checkable"
      :treeData="deptTree"
      @check="onCheck"
      @select="onSelect"
      :checkedKeys="checked"
      :selecteddKeys="selected"
      :expandedKeys="iExpandedKeys"
      :autoExpandParent="autoExpandParent"
      @expand="onExpand"
    >
        <template slot="title" slot-scope="{title}">
            <span v-if="title.indexOf(searchValue) > -1">
                {{title.substr(0, title.indexOf(searchValue))}}
                <span style="color: #f50">{{searchValue}}</span>
                {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
            </span>
            <span v-else>{{title}}</span>
        </template>
    </a-tree>
  </div>
  
</template>

<script>

export default {
  name: "",           //啥意思
  props: {
    deptTree: Array,
    heightTree: String,
    checkable: Boolean,
    // iExpandedKeys:Array,
    searchValue:String
  },
  data() {
    return {
      
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
      treeData: [],
      iExpandedKeys:[]
    };
  },
  mounted() {
      
      
  },
  watch: {
        'searchValue': function(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
            this.onSearch(newVal)
        },
    },

  methods: {
    //树形选中
    onCheck(checked) {
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      this.selected = [];
    },
    // 树形选择
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      this.checked = [];
      console.log(this.searchValue);
      
    },

        // 用监听事件监听serchValue得值，有变化就执行onSearch方法
    async onSearch(value) {
      let that = this;
    //根据value过滤树节点符合搜索值得节点，返回相应id数组，赋值给iExpandedKeys
      let keys = await deptApi.searchDeptByKey({ key: value });

      if (keys.success) {
        that.iExpandedKeys = keys.result;
        // that.searchValue = value;
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    }
  }
};
</script>

<style>
</style>
